<template>
	<nav v-if="total > 0">
    <ul class="pagination">
      <li
          v-for="item in totalPage"
          :key="item"
          :class="{ active: page === item }"
          class="page-item"
          >
        <a class="page-link" href="javascript:;" @click="changePage(item)">{{ item }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
	export default {
		name: 'Pagination',
		props: {
			total: {
				type: Number,
				default: 0
			},
			limit: {
				type: Number,
				default: 20
			},
			page: {
				type: Number,
				default: 0
			},
		},
		computed: {
			totalPage () {
  			return Math.ceil(this.total / this.limit)
      },
		},
		methods: {
			changePage(item) {
				this.$emit('changePage', item)
			}
		}
	}
</script>
